<template>
	<view class="protocal">
		<view class="head p_flex">
			<view class="text"> 上传协议 </view>
			<view class="up-load">
				<image src="https://dy.sykj365.com/uploads/mini/scan.png" v-if="!protocalImg"
					@click="handleImgClick('protocalImg')"></image>
				<image :src="imgHost + protocalImg" mode="aspectFill" v-else @click="handleImgClick('protocalImg')"
					@longpress="deleteImg('protocalImg')"></image>
			</view>
			<view class="check-file" @click="getTemplate">
				<image src="https://dy.sykj365.com/uploads/mini/img-btn.png"></image>
				<text>查看模板</text>
			</view>
		</view>
		<view class="id-content">
			<view class="id-text">
				<text>上传身份证</text>
			</view>
			<view class="id-image-box">
				<view class="id-image">
					<image src="https://dy.sykj365.com/uploads/mini/front.png" mode="aspectFill"
						@click="handleImgClick('idImg')" v-if="!idImg">
					</image>
					<image v-else :src="imgHost + idImg" mode="aspectFill" @longpress="deleteImg('idImg')"
						@click="handleImgClick('idImg')">
					</image>
					<view class="text">
						<text>上传身份证正面</text>
					</view>
				</view>
				<view class="id-image">
					<image src="https://dy.sykj365.com/uploads/mini/back.png" mode="aspectFill" v-if="!idImgBack"
						@click="handleImgClick('idImgBack')">
					</image>
					<image :src="imgHost + idImgBack" mode="aspectFill" v-else @longpress="deleteImg('idImgBack')"
						@click="handleImgClick('idImgBack')"></image>
					<view class="text">
						<text>上传身份证反面</text>
					</view>
				</view>
			</view>
		</view>
		<view class="remark-box">
			<text>说明介绍</text>
			<rich-text :nodes="remark"></rich-text>
		</view>
		<view class="p_btn" @click="getSubmit" v-if="status == 2">
			<view>提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				protocalImg: "",
				idImg: "",
				idImgBack: "",
				remark: "",
				templateUrl: "", // TODO: 待补充
				imgHost: this.$api.yuming,
				status: 2
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData() {
				this.$http.post(this.$api.sign_detail).then((res) => {
					console.log(res)
					this.protocalImg = res.data.sign_image;
					this.idImg = res.data.card_front_image;
					this.idImgBack = res.data.card_back_image;
					this.status = res.data.status == 0 ? !res.data.sign_image ? 2 : 0 : res.data.status
				});
				this.$http.post(this.$api.priceRemark).then((res) => {
					console.log(res)
					this.remark = res.data.sign_content;
					this.templateUrl = res.data.agreement_file;
				});

			},
			// 获取模板
			getTemplate() {
				getApp().getBigImg([this.templateUrl], 0);
			},
			// 上传身份证反面
			uploadImg(key) {
				let self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ["original", 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], // 从相册，相机
					success: function(res) {
						let files = res.tempFilePaths;
						uni.uploadFile({
							url: self.$api.upload,
							filePath: files[0],
							name: "file",
							formData: {},
							success: (uploadFileRes) => {
								let result = JSON.parse(uploadFileRes.data);
								if (result.code === 20000) {
									self[key] = result.data.url;
									getApp().getMsg("上传成功", "success");
								} else {
									getApp().getMsg(result.msg);
								}
							},
						});
					},
				});
			},
			getLook(key) {
				getApp().getBigImg([this[key]], 0);
			},
			deleteImg(key) {
				this[key] = "";
			},
			handleImgClick(key) {
				if (this[key]) {
					this.getLook(key);
				} else {
					this.uploadImg(key);
				}
			},
			getSubmit() {
				if (!this.protocalImg) return getApp().getMsg("请上传协议照片", "error");
				if (!this.idImg) return getApp().getMsg("请上传身份证正面照片", "error");
				if (!this.idImgBack)
					return getApp().getMsg("请上传身份证反面照片", "error");

				let param = {
					sign_image: this.protocalImg,
					card_front_image: this.idImg,
					card_back_image: this.idImgBack,
					remark: this.remark
				};
				this.$http.post(this.$api.sign, param).then((res) => {
					getApp().getMsg("提交成功");
					getApp().getBack();
				});
			},
		},
	};
</script>

<style lang="less">
	page {
		background-color: #f8f8fb;
	}

	.protocal {
		background-color: #f8f8fb;
		padding-top: 21rpx;
		height: 100vh;
		width: 100vw;
	}

	.head {
		width: 698rpx;
		height: 165rpx;
		background: #ffffff;
		margin-bottom: 18rpx;
		align-items: center;
		padding-left: 52rpx;
		border-radius: 10rpx;

		.text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 26rpx;
			color: #333333;
			line-height: 26rpx;
			text-align: center;
		}

		.up-load {
			width: 144rpx;
			height: 100rpx;
			margin-left: 148rpx;

			image {
				width: 144rpx;
				height: 100rpx;
			}
		}

		.check-file {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 110rpx;
			margin-left: 116rpx;
			margin-bottom: 5rpx;

			image {
				width: 46rpx;
				height: 41rpx;
			}

			text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #999999;
				line-height: 26rpx;
				margin-top: 20rpx;
				text-align: center;
			}
		}
	}

	.id-content {
		width: 750rpx;
		height: 431rpx;
		background: #ffffff;
		border-radius: 10rpx;
		padding-top: 32rpx;

		.id-text {
			width: 129rpx;
			height: 80rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 26rpx;
			color: #333333;
			line-height: 76rpx;
			text-align: center;
			margin-left: 52rpx;
		}

		.id-image-box {
			display: flex;
			justify-content: space-around;

			.id-image {
				width: 299rpx;
				height: 284rpx;
				background: #f8fafd;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 230rpx;
					height: 159rpx;
					margin-top: 34rpx;
					margin-bottom: 40rpx;
				}

				.text {
					width: 299rpx;
					height: 53rpx;
					line-height: 53rpx;
					text-align: center;
					color: #ffffff;
					background-color: #4a84f4;
				}
			}
		}
	}

	.remark-box {
		width: 750rpx;
		height: 300rpx;
		background: #ffffff;
		border-radius: 10rpx;
		margin-top: 19rpx;

		text {
			width: 129rpx;
			height: 80rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 26rpx;
			color: #333333;
			line-height: 76rpx;
			text-align: center;
			margin-left: 52rpx;
		}

	}

	.p_btn {
		bottom: 0;
		left: 0;
		right: 0;
		position: fixed;
	}
</style>